<template>
  <div>
    <index-head @search_button="getList">
      <template slot="title-footer">
        <div class="breadcrumb" v-show="searchValue">
          关于”<span class="search_value">{{ searchValue }}</span>“的搜索结果，约{{ total }}条
        </div>
      </template>
    </index-head>
    <div class="newSearchContainer">
      <div class="conditionsBox">
        <el-select v-model="regionalAttributes" placeholder="地区属性" style="width: 120px;" @change="getList">
          <el-option v-for="item in regionalAttributesList" :key="item" :label="item" :value="item"></el-option>
        </el-select>
        <el-select v-model="frequency" placeholder="周期属性" style="width: 120px;" @change="getList">
          <el-option v-for="item in frequencyList" :key="item" :label="item" :value="item"></el-option>
        </el-select>
        <el-select v-model="industry" placeholder="行业属性" style="width: 120px;" @change="getList">
          <el-option v-for="item in industryList" :key="item" :label="item" :value="item"></el-option>
        </el-select>
        <el-select v-model="homeClassName" placeholder="数据库分类" style="width: 120px;" @change="getList"
          v-if="source === 'index'">
          <el-option v-for="item in homeClassNameList" :key="item" :label="item" :value="item"></el-option>
        </el-select>
        <el-select v-model="twoClassNameCondition" placeholder="数据库分类" style="width: 120px;" @change="getList" v-else>
          <el-option v-for="item in twoClassNameConditionList" :key="item" :label="item" :value="item"></el-option>
        </el-select>
        <el-select v-model="indexName" placeholder="数据库" style="width: 120px;" @change="getList">
          <el-option v-for="item in indexNameList" :key="item" :label="item" :value="item"></el-option>
        </el-select>
      </div>
      <div class="table-l" ref="tableWrapper">
        <el-table id="mytable" :data="tableData" style="width: 100%">
          <el-table-column prop="index_name" label="指标" :show-overflow-tooltip="true" width="400">
            <template slot-scope="scope">
              <div v-html="coverIndexName(scope.row.index_name)" style="cursor: pointer;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;"></div>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="index_name" label="指标" /> -->
          <el-table-column prop="regional_attributes" label="地区" align="center" />
          <el-table-column prop="industry" label="行业" align="center" />
          <el-table-column prop="home_class_name" label="数据库分类" align="center" v-if="source === 'index'" />
          <el-table-column prop="two_class_name" label="数据库分类" align="center" v-else />
          <el-table-column prop="table_name" label="数据库" align="center" :show-overflow-tooltip="true" width="200" />
          <el-table-column prop="frequency" label="周期" width="60" align="center" />
          <el-table-column prop="min_time" label="起止时间" align="center">
            <template slot-scope="scope">
              {{ scope.row.min_time }} - {{ scope.row.max_time }}
            </template>
          </el-table-column>
          <el-table-column prop="action" label="操作" :width="60" align="center">
            <template slot-scope="scope">
              <div size="small" @click="handleCheck(scope.row)" style="color: #D82B2C">查看</div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="flex-center">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
          :page-size="limit" layout="total, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import indexHead from "../components/head";
import { mapGetters, mapMutations } from 'vuex'
import _ from 'lodash';

export default {
  name: "searchPage",
  components: {
    indexHead,
  },
  data() {
    return {
      tableData: [],
      page: 1,
      limit: 18,
      total: 0,
      searchQuery: '',
      industry: '',
      indexName: '',
      homeClassName: '',
      className: '',
      frequency: '',
      regionalAttributes: '',
      homeClassNameList: [],// 首页分类
      indexNameList: [],// 数据库
      industryList: [], // 行业
      regionalAttributesList: [],// 地区
      frequencyList: [],// 周期
      source: '',
      twoClassNameCondition: '',
      twoClassNameConditionList: [],
    }
  },
  computed: {
    bodyData() {
      return {
        url: `7100/searchNew`,
        method: "get",
        params: {
          page: this.page,
          limit: this.limit,
          searchValue: this.searchValue,  // 搜索框输入的值
          userName: this.userInfo.username,  // 搜索框输入的值
          industry: this.industry,  // 行业
          frequency: this.frequency, // 周期
          regionalAttributes: this.regionalAttributes, // 地区
          ClassName: this.homeClassName || this.twoClassNameCondition, // 首页分类
          indexName: this.indexName, // 二级分类
          domain: 'www.shujuquan.cn' //window.location.host
        }
      }
    },
    ...mapGetters({
      getTreeMenuArr: 'getTreeMenuArr',
      searchValue: 'getSearchValue',
      userInfo: 'getUserInfo',
    }),
  },
  mounted() {
    this.source = this.$route.query.source
    this.getList()
  },
  methods: {
    ...mapMutations([
      'setBreadcrumb',
      'setHeadTag'
    ]),
    coverIndexName(index_name) {
      if (!this.searchValue) return index_name
      if (index_name.indexOf(this.searchValue) !== -1) {
        let res = new RegExp("(" + this.htmlEscape(this.searchValue) + ")", 'g');
        let value = index_name.replace(res, "<span style='color:red;'>" + this.searchValue + "</span>");
        return value
      } else {
        return index_name
      }
    },
    htmlEscape(text) {
      return text.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&')
    },
    handleCheck(row) {
      let level1Name = row.class_name
      let level2Name = row.table_name
      let { type, region_code, min_time, max_time, index_code, } = row
      let templateName = type.replace('tb-', '')
      let indexCode = index_code
      let regionCode = region_code
      let timeCode = []
      if (String(min_time).length === 4) {  // 2012
        let len = max_time - min_time
        for (let i = 0; i <= len; i++) {
          timeCode.push(Number(min_time) + i)
        }
      } else if (min_time.search('Q') !== -1) { // 2013Q1 2013Q2 2013Q3 2013Q4
        let maxYear = max_time.substr(0, 4)
        let minYear = min_time.substr(0, 4)
        let len = maxYear - minYear
        for (let i = 0; i <= len; i++) {
          let year = Number(minYear) + i
          let years = []
          let maxQ = 4
          let minQ = 1
          if (!i) {
            minQ = min_time.substr(5, 6)
          } else if (i === len) {
            maxQ = max_time.substr(5, 6)
          }
          for (let j = minQ; j <= maxQ; j++) {
            years.push(String(year) + `Q` + j)
          }
          timeCode = timeCode.concat(years)
        }
      } else { // 201012
        let maxYear = max_time.substr(0, 4)
        let minYear = min_time.substr(0, 4)
        let len = maxYear - minYear
        for (let i = 0; i <= len; i++) {
          let year = Number(minYear) + i
          let years = []
          let maxM = 12  // 区间最后最大月份
          let minM = 1
          if (!i) {
            minM = Number(min_time.substr(4, 6))
          } else if (i === len) {
            maxM = Number(max_time.substr(4, 6))
          }
          for (let j = minM; j <= maxM; j++) {
            j = String(j)
            j = j.length === 1 ? '0' + j : j
            years.push(String(year) + j)
          }
          timeCode = timeCode.concat(years)
        }
      }
      localStorage.setItem('macroCodes', JSON.stringify({ indexCode, regionCode, timeCode: timeCode.join(',') }))



      let old_token = localStorage.getItem('TOKEN_KEY')
      let breadcrumb = []
      let headTag = []
      if (row.status == 3) {
        breadcrumb.push("分省月度数据")
        breadcrumb.push("分省���度数据")
        headTag.push(row.name)
        this.setHeadTag(headTag)
      } else {
        headTag.push(row.head_tag)
        this.setHeadTag(headTag)
      }
      this.setBreadcrumb([level1Name, level2Name])
      let path1 = ""
      if (import.meta.env.DEV) {
        path1 = "http://" + row.path + ":3000/#/" + row.url + "?" + "tablename=" + row.type + "&token=" + old_token + "&menuType=" + row.menuType + "&status=" + row.status + "&breadcrumb=" + breadcrumb + "&headTag=" + headTag
      } else {
        path1 = "http://" + row.path + "/#/" + row.url + "?" + "tablename=" + row.type + "&token=" + old_token + "&menuType=" + row.menuType + "&status=" + row.status + "&breadcrumb=" + breadcrumb + "&headTag=" + headTag
      }
      console.log(path1)
      window.location.replace(path1);

      // this.setBreadcrumb([level1Name, level2Name])
      // this.$router.push({ path: '/macro4', query: { tablename: templateName, pageType: 'changeParam', status: row.status, menuType: row.menuType } })
    },
    handleSizeChange(val) {
      this.limit = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.page = val
      this.getList()
    },
    async getList() {
      let res = await this.$axios.request(this.bodyData)
      if (String(res.data.code) === '1') {  // 失败
        this.$message.error(res.data.resp_msg);
        return
      }
      // let datas = Object.assign([], _.get(res, 'data.data', []))
      // this.tableData = Object.assign([], datas)
      this.tableData = res.data.tableData.data
      this.regionalAttributesList = res.data.regionalCondition
      this.frequencyList = res.data.frequencyCondition
      this.industryList = res.data.industryCondition
      this.indexNameList = res.data.indexNameCondition
      this.homeClassNameList = res.data.homeClassNameCondition
      this.twoClassNameConditionList = res.data.twoClassNameCondition
      console.log(this.regionalAttributesList)
      this.total = res.data.tableData.count
    },
  }
}
</script>

<style scoped lang="less">
:deep(.newSearchContainer) {
  background: #15161C;
  padding: 0 16px 16px;
  overflow: hidden;
  max-width: 1536px;
  margin: 0 auto 40px;
  box-sizing: border-box;

  .conditionsBox {
    display: flex;
    margin: 10px 0 4px;

    .el-select {
      flex: 1;
      margin: 0 4px;
      height: 32px;
      line-height: 32px;
      background: url(../assets/image/newSelectBg.png) no-repeat right center #494A52;

      .el-input__inner {
        background: none;
        height: 32px;
        line-height: 32px;
      }

      .el-input__suffix {
        display: none;
      }
    }

    .el-select:last-child {
      margin-right: 0;
    }

    .el-select:first-child {
      margin-left: 0;
    }
  }

  .table-l {
    margin-top: 5px;
    overflow-y: auto;



    .el-table__fixed .el-table__fixed-body-wrapper .el-table__body {
      padding-bottom: 10px !important;
    }

    .el-table__body-wrapper {
      overflow-x: auto;
    }

    ::-webkit-scrollbar {
      width: 16px;
      height: 16px;
      display: block;
    }

    ::-webkit-scrollbar-thumb {
      border-radius: 0;
      background: #948482;
    }

    .el-table__header {
      tr th:nth-child(1) .cell {
        font-size: 15px;
      }

      .el-table__cell {
        height: 38px;
        padding: 0;
        border-right: 3px solid #15161C;
        border-bottom: 4px solid #15161C;

        .cell {
          padding: 0;
          color: #fff;
          font-size: 14px;
        }
      }
    }

    .el-table__body {
      .el-table__row {
        background: #494A52;

        .el-table__cell {
          height: 32px;
          padding: 0;
          border-right: 3px solid #15161C;
          border-bottom: 4px solid #15161C;

          .cell {
            padding: 0 4px;
            color: #289EC9;
            font-size: 14px;
            font-weight: bold;
          }
        }

        .el-table__cell:nth-child(1) {
          .cell {
            font-size: 15px;
            text-align: left;
            padding: 0 8px;
          }
        }
      }

      .el-table__row:last-child {
        .el-table__cell {
          border-bottom: none;
        }
      }

      .el-table__row:nth-child(2n) {
        background: #25262D;
      }
    }

    .el-checkbox:last-of-type {
      margin: 0;
    }

    .el-checkbox__inner {
      width: 13px;
      height: 13px;
      background: #948482;
      border: none;
    }

    .el-checkbox__input.is-checked .el-checkbox__inner,
    .el-checkbox__input.is-indeterminate .el-checkbox__inner {
      width: 13px;
      height: 13px;
      background: #D82B2C;
      border: none;
    }

    .el-checkbox__inner::after {
      display: none;
    }
  }

  .flex-center {
    background: #000;
    padding: 20px 0;

    .el-pager li.btn-quicknext,
    .el-pager li.btn-quickprev,
    .el-pagination__total,
    .el-input__inner,
    .el-pagination__jump {
      color: #948482;
      font-size: 14px;
    }

    .el-pager li {
      border-color: #948482;
      color: #948482;
    }

    .el-pager li.active {
      background: #D82B2C;
      color: #fff;
    }

    .el-pagination .btn-next .el-icon,
    .el-pagination .btn-prev .el-icon {
      color: #948482;
    }
  }
}
</style>